<template>
    <a-form ref="dcFormRef" :id="item.id" :layout="item.componentProps.formLayout" v-bind="formItemLayout"
        class="dc-form" :model="pageData" :hidden="item.componentProps.hidden" :rules="data.rules" :class="{bordered:item.componentProps.bordered,buttonTop: item.componentProps.button.buttonPlace == 'top',
        buttonBottom: item.componentProps.button.buttonPlace == 'bottom'}" :style="item.componentProps.style">

        <!-- <a-button @click="testdata">查看</a-button> -->
        <!-- 顶部按钮 -->
        <div class="action-button mb10" :align="item.componentProps.button.buttonAlign"
            v-if="item.componentProps.button.showButton && item.componentProps.button.buttonPlace == 'top'">
            <a-button type="primary" v-if="item.componentProps.button.submitButton" @click="submitForm">
                {{ item.componentProps.button.submitButtonText }}
            </a-button>
            <a-button style="margin-left: 10px" v-if="item.componentProps.button.resetButton" @click="resetForm">
                {{item.componentProps.button.resetButtonText}}
            </a-button>
        </div>

        <slot name="content"></slot>

        <!-- 底部按钮 -->
        <div class="action-button" :align="item.componentProps.button.buttonAlign"
            v-if="item.componentProps.button.showButton && item.componentProps.button.buttonPlace == 'bottom'">
            <a-button type="primary" v-if="item.componentProps.button.submitButton" @click="submitForm">
                {{ item.componentProps.button.submitButtonText }}
            </a-button>
            <a-button style="margin-left: 10px" v-if="item.componentProps.button.resetButton" @click="resetForm">
                {{item.componentProps.button.resetButtonText}}
            </a-button>
        </div>

    </a-form>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue';
import { pageData, getCustomMethod, formStorage } from '../../pageManager.js';
import { cloneObject } from '../../common/util/util.js';

const dcFormRef = ref();

const props = defineProps({
    item: {
        type: Object,
        required: true
    },
})

// 表单布局
const formItemLayout = computed(() => {
    let layout = props.item.componentProps.formLayout;
    return layout === 'horizontal'
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
        }
        : {};
});

const data = reactive({
    rules: {}
})



watch(() => props.item.children, (newValue, oldValue) => {
    setPropertyAndRules();
}, { deep: true });

// 设置表单内组件属性和校验规则
const setPropertyAndRules = () => {
    // console.log("设置校验规则")
    data.rules = {};
    if (props.item.children.length > 0) {
        for (let i = 0; i < props.item.children.length; i++) {
            let item = props.item.children[i];
            item.isFormItem = true;
            item.formId = props.item.id;
            data.rules[item.field] = [];
            if (item.rules != undefined && item.rules.length > 0) {
                data.rules[item.field] = resetRulesPattern(item.rules);
            }
        }
    }
}

/**
 * 重置规则模式
 * 将给定规则数组中的每个规则的模式（如果存在）转换为正则表达式对象。
 * @param {Array} rules - 包含规则的数组，每个规则对象可能包含一个模式属性。
 * @return {Array} 返回一个新的规则数组，其中的模式属性已被转换为正则表达式对象。
 */
const resetRulesPattern = (rules) => {
    // 克隆规则数组，以避免修改原始数据
    let rulesData = cloneObject(rules);
    for (let i = 0; i < rulesData.length; i++) {
        // 如果当前规则对象包含模式属性，则将其转换为正则表达式
        if (rulesData[i].pattern != undefined) {
            rulesData[i].pattern = new RegExp(rulesData[i].pattern);
        }
    }
    return rulesData;
}


onMounted(() => {
    setPropertyAndRules();
    formStorage[props.item.id] = dcFormRef;
})

// 提交表单
const submitForm = () => {
    formStorage[props.item.id].validate()
        .then(() => {
            getCustomMethod(props.item, 'submit', pageData)
        })
        .catch(error => {
            getCustomMethod(props.item, 'submit', error)
        });
};

// 表单重置
const resetForm = () => {
    dcFormRef.value.resetFields();
    getCustomMethod(props.item, 'reset', null)
}

</script>

<style lang="less">
.dc-form {
    border-radius: 6px;

    &.bordered {
        border: 1px solid var(--borderColor);
    }

    &.buttonTop {
        .dragArea {
            height: calc(100% - 42px);
        }
    }

    &.buttonBottom {
        .dragArea {
            height: calc(100% - 32px);
        }
    }
}

.mb10 {
    margin-bottom: 10px;
}
</style>